import { useSnapshot } from 'valtio';
import { TreeSelect } from 'szcd';
import { type TreeOption } from '../../../../types';

export interface IView {
  value: Array<string|TreeOption>;
  options: TreeOption[];
  onChange: (value: TreeOption[]) => void;
}

const Department: React.FC<{ service: IView }> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);

  return (
    <TreeSelect
      value={snap.value}
      treeData={snap.options && service.options}
      placeholder="请选择"
      treeCheckable
      showSearch
      allowClear
      multiple
      treeDefaultExpandAll
      treeCheckStrictly
      showCheckedStrategy="SHOW_ALL"
      onChange={(e) => {
        service.onChange?.(e as TreeOption[]);
      }}
    />
  );
};

export default Department;
